<template>
	<view class="page" :style="{ height: h + 'px' }">
		<view class="p_head"
			:style="{ 'padding-top': mt + 'px','background':'url('+topBgImg+')','background-size':'cover' }">
			<c-nav-bar title="路线详情" bgColor="transparent" leftIconColor="#fff" :titleStyle="titleStyle"></c-nav-bar>
			<view class="ph_title">
				<image src="https://i.ringzle.com/file/20240224/b4a7ef414055444cad5f9033f4984f97.png" class="pht_left">
				</image>
				<view class="pht_right" @tap="mapModel">
					<image src="https://i.ringzle.com/file/20231123/b68480d47145460f94cdac0371fd43b8.png"></image>
					<text>路线地图</text>
				</view>
			</view>
			<view class="ph_days">
				<template v-if="alldata.length > 0">
					<view class="phd_pre" :class="{ active: hday == index }" v-for="(item, index) in alldata"
						:key="index">
						<view class="phdp_left">
							<view class="pl_day">
								<text>DAY</text>
								<text>0{{ index + 1 }}</text>
							</view>
							<view class="pl_scenes">
								<view class="yanshabi" v-for="(item1, index1) in item.scenicSpotList" :key="index1">
									<view class="cuinima1">
										{{ item1.generalSpot.name }}
									</view>
									<view class="cuinima2" v-if="index1 < item.scenicSpotList.length - 1">
										<image style="width: 24rpx; height: 16rpx"
											src="https://i.ringzle.com/file/20240225/25b5d3784cb54bbb989e77ed79dfbdb9.png"
											mode="aspectFit">
										</image>
									</view>
								</view>
								<!-- <u--text :lines="2" color="#EFEFEF" size="24rpx" text="六合朝阳景区"></u--text> -->
							</view>
						</view>
						<view class="phdp_right" @tap="xiangiqnga(item, index)">详情</view>
					</view>
				</template>
			</view>
		</view>
		<view class="content days" :style="{ height: 'calc(100% - ' + (tbHeight + 87) + 'px)' }">
			<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
				:scroll-top="dayScrollTop" @scroll="scrollTapDay">
				<view v-for="(item, index) in dayList" :key="index" class="day_item" :class="'day_item_' + index">
					<view class="di_top">
						<view class="goushi">Day{{ index + 1 }}</view>
						<view class="diia_r" @tap="addScenicSpot(item, index)">
							+增加行程
						</view>
					</view>
					<view class="di_scenicSpot">
						<view v-for="(ss, idx) in item.scenicSpotList" :key="idx">
							<view class="ds_top">
								<!-- 景点 -->
								<view class="ds_left" v-if="ss.sourceType == 1" @click="goToDetail(ss)">
									<view class="dl_img">
										<image :src="ss.generalSpot.coverImage"></image>
										<view class="mingxi">
											<view class="mingxi1">
												{{ idx + 1 }}
											</view>
											<view class="mingxi2">
												{{
                          ss.generalSpot.clockFlag == 1 &&
                            !ss.generalSpot.spotId
                            ? "打卡点"
                            : "景点"
                        }}
											</view>
										</view>
									</view>
									<view class="dsl_info">
										<view>{{ ss.generalSpot.name }}</view>
										<view v-if="ss.generalSpot.suggestTime">建议游玩{{ ss.generalSpot.suggestTime }}
										</view>
										<view v-if="
                      ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId
                    ">{{ ss.generalSpot.address || "" }}</view>
										<view v-else>开放时间 {{ ss.generalSpot.openDate }}</view>
									</view>
								</view>
								<!-- 住宿 -->
								<view class="ds_left" v-else-if="ss.sourceType == 2" @click="goToStay(ss)">
									<view class="dl_img">
										<image :src="ss.generalSpot.coverImage"></image>
										<view class="mingxi">
											<view class="mingxi1">
												{{ idx + 1 }}
											</view>
											<view class="mingxi2">
												{{
                          (ss.generalSpot.clockFlag == 1 &&
                            !ss.generalSpot.spotId) || (ss.generalSpot.clockFlag == 1
                              && ss.generalSpot.spotId && ss.generalSpot.flag == 0)
                            ? "打卡点"
                            : "住宿"
                        }}
											</view>
										</view>
									</view>
									<view class="dsl_info">
										<view>{{ ss.generalSpot.name }}</view>
										<block v-if="
                      ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId
                    ">
											<view v-if="ss.generalSpot.suggestTime">建议游玩{{ ss.generalSpot.suggestTime }}
											</view>
										</block>
										<block v-else>
											<view class="price" v-if="ss.generalSpot.startPrice">
												<span>￥</span>
												<span>{{ ss.generalSpot.startPrice }}</span>
												<span>起</span>
											</view>
											<view style="color: #999999" v-else>
												<span>暂无房间</span>
											</view>
										</block>
										<view>
											{{ ss.generalSpot.address || "" }}
										</view>
									</view>
								</view>
								<!-- 美食 -->
								<view class="ds_left" v-else-if="ss.sourceType == 3" @click="goToFood(ss)">
									<view class="dl_img">
										<image :src="ss.generalSpot.coverImage"></image>
										<view class="mingxi">
											<view class="mingxi1">
												{{ idx + 1 }}
											</view>
											<view class="mingxi2">
												{{
                          ss.generalSpot.clockFlag == 1 &&
                            !ss.generalSpot.spotId
                            ? "打卡点"
                            : "美食"
                        }}
											</view>
										</view>
									</view>
									<view class="dsl_info">
										<view>{{ ss.generalSpot.name }}</view>
										<block v-if="
                      ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId
                    ">
											<view v-if="ss.generalSpot.suggestTime">建议游玩{{ ss.generalSpot.suggestTime }}
											</view>
											<view>
												{{ ss.generalSpot.address || "" }}
											</view>
										</block>
										<block v-else>
											<u-rate readonly inactiveColor="#FF7D01" size="30" :count="4"
												v-model="valueeee" activeColor="#FF7D01"></u-rate>
											<view>开放时间
												{{
                          ss.generalSpot.openDate ||
                          "具体营业状态以当天开放情况为准"
                        }}
											</view>
										</block>
									</view>
								</view>
								<!-- 其他 -->
								<view class="ds_left" v-else @tap="toYjl(ss)">
									<view class="dl_img">
										<image :src="ss.generalSpot.coverImage"></image>
										<view class="mingxi">
											<view class="mingxi1">
												{{ idx + 1 }}
											</view>
											<view class="mingxi2">
												{{
                          ss.generalSpot.clockFlag == 1 &&
                            !ss.generalSpot.spotId
                            ? "打卡点"
                            : "其他"
                        }}
											</view>
										</view>
									</view>
									<view class="dsl_info">
										<view>{{ ss.generalSpot.name }}</view>
										<view v-if="ss.generalSpot.suggestTime">建议游玩{{ ss.generalSpot.suggestTime }}
										</view>
										<view>
											{{ ss.generalSpot.address || "" }}
										</view>
									</view>
								</view>

								<view class="right" v-if="ss.sourceType !== 2">
									<image @tap.stop="delJd(index, idx)" class="ds_right"
										src="https://i.ringzle.com/file/20240225/d650748d6726479ca559ef9f546d2d89.png">
									</image>
									<view v-if="ss.generalSpot.startPrice == 0 && ss.sourceType == 1" class="price"
										style="color: #ff4141; font-size: 14px;font-weight:bold;">免费</view>
									<view v-if="ss.generalSpot.startPrice == -1 && ss.sourceType == 1" class="price"
										style="color: #999999; font-size: 14px;font-weight:bold;"></view>
									<view v-else-if="
                    !ss.generalSpot.startPrice && ss.sourceType !== 1
                  " class="price" style="color: #999999; font-size: 24rpx"></view>
									<view class="price" v-if="ss.generalSpot.startPrice > 0">
										<span>￥</span>
										<span>{{ ss.generalSpot.startPrice }}</span>
										<span>起</span>
									</view>
								</view>
								<view class="right" v-else>
									<image @tap.stop="delJd(index, idx)" class="ds_right"
										src="https://i.ringzle.com/file/20240225/d650748d6726479ca559ef9f546d2d89.png">
									</image>
								</view>
							</view>
							<view class="tuijianliyou">
								推荐理由：{{ ss.generalSpot.recommendReason }}
							</view>
							<view class="ds_bottom" v-if="idx != item.scenicSpotList.length - 1">
								<view class="juli1">
									<view class="shuxian1"></view>
									<view class="shuxian2"></view>
									<view class="shuxian3"></view>
								</view>
								<view class="juli2">
									{{ ss.distance || "" }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom bottom_del" v-if="!isdel">
			<view class="bottom_left">
				<view class="shareSquare">
					<view class="text">
						<button class="share" open-type="share">
							<image src="https://i.ringzle.com/file/20240328/bde5e9867be74318a4a8d8b2be1ff5aa.png">
							</image>
							分享
						</button>
					</view>
				</view>
				<view class="delete" @click="toClearXc">
					<view class="image">
						<image src="https://i.ringzle.com/file/20240328/b4a339e88fea470a94eee2b35b32c13d.png"></image>
					</view>
					<view class="text" style="margin-top: 16rpx">清除行程</view>
				</view>
			</view>
			<view class="b_btn_edit" @tap="handlePopup">保存行程</view>
		</view>
		<view class="bottom bottom_del" v-else>
			<view class="bottom_left">
				<view class="shareSquare">
					<view class="text">
						<button class="share" open-type="share">
							<image src="https://i.ringzle.com/file/20240328/bde5e9867be74318a4a8d8b2be1ff5aa.png">
							</image>
							分享
						</button>
					</view>
				</view>
				<view class="delete" @click="toClearXc">
					<view class="image">
						<image src="https://i.ringzle.com/file/20240328/b4a339e88fea470a94eee2b35b32c13d.png"></image>
					</view>
					<view class="text" style="margin-top: 16rpx">清除行程</view>
				</view>
			</view>
			<view class="b_btn_edit" @tap="toEditXc">保存行程</view>
		</view>
		<!-- 填写行程名称 -->
		<view class="travelName">
			<u-popup :show="show" @close="close" :round="16">
				<view class="popup" :style="{ height: hit + 'vh' }">
					<view class="title">
						<text @tap="close" style="font-size: 36rpx">取消</text>
						<text>设置行程名称</text>
						<text @tap="toSaveXc" v-if="!isdel" class="blue" style="font-size: 36rpx">确定</text>
						<text @tap="toEditXc" v-else class="blue" style="font-size: 36rpx; color: #007a69">确定</text>
					</view>
					<u--textarea @focus="focused" @blur="blured" height="350" maxlength="50" v-model="travelName"
						:cursorSpacing="80" placeholder="请输入行程名称"></u--textarea>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: "36rpx",
					fontWeight: "bold",
					color: "#fff",
				},
				hday: 0,
				tbHeight: 0,

				hit: "40",
				alldata: [],
				currentIndex: 0,
				valueeee: "4",
				travelName: "我的嵊泗行1",
				show: false,
				item: null,
				itemCopy: null,
				current: 0,
				tabList: [],
				id: "",
				tabId: "",
				dayList: [],
				title: "",
				isdel: false,
				limit: 10,
				page: 1,
				islandIdList2: [],
				scheduleId2: "",
				trrId2: "",
				dayScrollTop: 0,
				dayTops: [],
				topBgImg: 'https://i.ringzle.com/file/20240412/059c753c11ad4a75ace69381d3c69e90.png'
			};
		},
		async onLoad(option) {
			await this.getLbList()
			if (option.id) {
				this.id = option.id;
				this.tabId = option.id;

				if (option.status && option.status == "edit") {
					this.isdel = true;
					let alldata = await this.getListByLineEdit();
					this.getTbHeight(alldata);
				} else {
					let alldata = await this.getListByLine();
					this.getTbHeight(alldata);
					this.getimgListByLine();
				}
				return;
			}
			if (option.item) {
				this.item = JSON.parse(option.item);
				this.islandIdList2 = this.item.islandIdList;
				let alldata = await this.getListByLine();
				this.getTbHeight(alldata);
				return;
			}
			if (option.shibieimg) {
				let tshibielist = JSON.parse(option.shibieimg);
				let alldata = await this.getimglist(tshibielist);
				this.getTbHeight(alldata);
				return;
			}
		},
		onShareAppMessage: function() {
			return {
				title: "路线详情",
				path: this.$path,
			};
		},
		methods: {
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/26').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => b.path)
						if (list.length > 0) this.topBgImg = list[0];
					}
				})
			},
			getTbHeight(alldata) {
				if (alldata.length == 0) return;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".p_head")
					.boundingClientRect((data) => {
						if (data) {
							this.tbHeight = data.height;
							this.getDaysTop(alldata);
						}
					})
					.exec();
			},
			getDaysTop(alldata) {
				const query = uni.createSelectorQuery().in(this);
				this.dayTops = [];
				this.$nextTick(() => {
					alldata.forEach((d, i) => {
						let qclass = ".day_item_" + i;
						query
							.select(qclass)
							.boundingClientRect((data) => {
								if (data) {
									let dtop = data.top - this.tbHeight;
									if (!this.dayTops.includes(dtop)) this.dayTops.push(dtop);
								}
							})
							.exec();
					});
				});
			},
			scrollTapDay(e) {
				let tops = this.dayTops.map((d, i) => {
					let json = {
						idx: i,
					};
					if (i == 0) {
						if (this.dayTops.length == 1) json.rang = [0, 999999];
						else json.rang = [0, this.dayTops[1] - 100];
					} else if (i > 0 && i < this.dayTops.length - 1)
						json.rang = [this.dayTops[i] - 100, this.dayTops[i + 1] - 100];
					else json.rang = [this.dayTops[i] - 100, 999999];
					return json;
				});
				let _t = tops.find(
					(t) => e.detail.scrollTop >= t.rang[0] && e.detail.scrollTop < t.rang[1]
				);
				if (_t) this.hday = _t.idx;
			},
			// 输入框聚焦时触发
			focused(e) {
				this.hit = 40;
			},
			// 输入框失去焦点时触发
			blured(e) {
				this.hit = 40;
			},
			async getimglist(e) {
				return new Promise((resolve, reject) => {
					this.$api
						.post("/api/customrec/genRouteByPic", {
							paramList: e,
						})
						.then((res) => {
							if (res.data.code === 0) {
								this.alldata = res.data.data.scheduleList;
								this.item = res.data.data;
								this.itemCopy = res.data.data;
								this.title = "嵊泗" + this.item.planDayNum + "日游";
								this.dayList = res.data.data.scheduleList;
								this.scheduleId2 = this.dayList[0].scenicSpotList[0].scheduleId;
								this.trrId2 = this.dayList[0].scenicSpotList[0].trrId;
								this.islandIdList2 = this.item.islandIdStr;
								this.dayList.forEach((d, i) => {
									let names = [];
									d.scenicSpotList.forEach((s) => names.push(s.generalSpot
										.name));
									d.address = names.join(">");
								});
								resolve(this.alldata);
							} else {
								this.$showModal(res.data.msg);
							}
						});
				});
			},
			getimgListByLine() {
				this.$api
					.get("/api/customrec/queryRecRouteDetail/" + this.id)
					.then((res) => {
						if (res.data.code === 0) {
							this.item = res.data.data;
							this.itemCopy = res.data.data;
							this.title = "嵊泗" + this.item.planDayNum + "日游";
							this.dayList = res.data.data.scheduleList;
							this.scheduleId2 = this.dayList[0].scenicSpotList[0].scheduleId;
							this.trrId2 = this.dayList[0].scenicSpotList[0].trrId;
							this.dayList.forEach((d, i) => {
								let names = [];
								d.scenicSpotList.forEach((s) => names.push(s.generalSpot.name));
								d.address = names.join(">");
							});
						} else this.$showModal(res.data.msg);
					});
			},
			mapModel() {
				// 利用这个id查询
				// uni.navigateTo({
				// 	url: '/pages/touristMap/customtour?id=' + this.tabId
				// })
				uni.navigateTo({
					url: "/pages/touristMap/customtour?item=" + JSON.stringify(this.item),
				});
			},
			goToDetail(ss) {
				if (ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId) return;

				uni.removeStorageSync("spid_old");
				uni.removeStorageSync("price_old");
				uni.setStorageSync("spid_old", ss.spotId);
				uni.setStorageSync("price_old", ss.generalSpot.startPrice);
				uni.navigateTo({
					url: "/pagesTrip/scenicSpots/spotDetail",
				});
				//  let datas = ss.generalSpot;
				// uni.navigateTo({
				//    url: "/pagesTrip/scenicSpots/spotDetail?spid=" + datas.mapId + '&price=' + datas
				//      .startPrice + '&isBuy=' + datas.isBuy
				//  })
			},
			goToFood(ss) {
				if (ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId) return;

				const caipid = ss.generalSpot.mapId;
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/details?caipid=" + caipid,
				});
			},
			//跳转渔家乐
			toYjl(ss) {
				if (ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId) return;

				uni.navigateTo({
					url: "/pagesTrip/fishJiale2/index",
				});
			},
			goToStay(ss) {
				if (ss.generalSpot.clockFlag == 1 && !ss.generalSpot.spotId) return;

				// 获取当前日期
				var today = new Date();
				// 格式化当前日期为 'YYYY-MM-DD' 的形式
				var formattedToday = this.formatDate(today);
				// 获取第二天的日期
				var tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				// 格式化第二天的日期为 'YYYY-MM-DD' 的形式
				var formattedTomorrow = this.formatDate(tomorrow);
				let list = [{
					homestayId: ss.generalSpot.spotId,
					leaveDate: formattedTomorrow,
					arriveDate: formattedToday,
				}, ];
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" + JSON.stringify(list),
				});
			},
			formatDate(date) {
				var year = date.getFullYear();
				var month = (date.getMonth() + 1).toString().padStart(2, "0");
				var day = date.getDate().toString().padStart(2, "0");
				return year + "-" + month + "-" + day;
			},
			changeTab(index) {
				this.current = index;
				this.tabId = this.tabList[index].id;
				this.getListByLine();
			},
			async getListByLine() {
				return new Promise((resolve, reject) => {
					this.$api
						.post("/api/customrec/genRouteByUserChose", {
							dayNum: this.item.dayNum,
							spotList: this.item.spotList,
							islandIdList: this.item.islandIdList,
						})
						.then((res) => {
							if (res.data.code === 0) {
								this.alldata = res.data.data.scheduleList;
								this.item = res.data.data;
								this.itemCopy = res.data.data;
								this.title = "嵊泗" + this.item.planDayNum + "日游";
								this.dayList = res.data.data.scheduleList;
								this.scheduleId2 = this.dayList[0].scenicSpotList[0].scheduleId;
								this.trrId2 = this.dayList[0].scenicSpotList[0].trrId;
								this.islandIdList2 = this.item.islandIdStr;
								this.dayList.forEach((d, i) => {
									let names = [];
									d.scenicSpotList.forEach((s) => names.push(s.generalSpot
										.name));
									d.address = names.join(">");
								});

								resolve(this.alldata);
							} else {
								this.$showModal(res.data.msg);
							}
						});
				});
			},
			async getListByLineEdit() {
				return new Promise((resolve, reject) => {
					this.$api
						.get("/api/customrec/queryMyRouteDetail/" + this.id)
						.then((res) => {
							if (res.data.code === 0) {
								this.item = res.data.data;
								this.alldata = res.data.data.scheduleList;
								this.itemCopy = res.data.data;
								this.title = "嵊泗" + this.item.planDayNum + "日游";
								this.dayList = res.data.data.scheduleList;
								this.scheduleId2 = this.dayList[0].scenicSpotList[0].scheduleId;
								this.trrId2 = this.dayList[0].scenicSpotList[0].trrId;
								this.islandIdList2 = this.item.islandIdStr;
								this.dayList.forEach((d, i) => {
									let names = [];
									d.scenicSpotList.forEach((s) => names.push(s.generalSpot
										.name));
									d.address = names.join(">");
								});

								resolve(this.alldata);
							} else {
								this.$showModal(res.data.msg);
							}
						});
				});
			},
			addScenicSpot(item, index) {
				uni.navigateTo({
					url: "/pagesTrip/custom-travel/addPort?islandIds=" + this.islandIdList2,
					events: {
						addSuccess: (data) => {
							data.forEach((d) => {
								if (this.dayList[index].scenicSpotList.length > 0) {
									let _last =
										this.dayList[index].scenicSpotList[
											this.dayList[index].scenicSpotList.length - 1
										];
									this.dayList[index].scenicSpotList[
											this.dayList[index].scenicSpotList.length - 1
										].distance =
										"相距" +
										this.getDistence(
											d.latitude,
											d.longitude,
											_last.generalSpot.lat,
											_last.generalSpot.lon
										);
								}

								this.dayList[index].scenicSpotList.push({
									scheduleId: this.scheduleId2,
									sourceType: d.type,
									trrId: this.trrId2,
									generalSpot: d.generalSpot,
									spotId: d.id,
								});
							});

							this.dayList.forEach((d, i) => {
								let names = [];
								d.scenicSpotList.forEach((s) => names.push(s.generalSpot.name));
								d.address = names.join(">");
							});
							this.item.planPlaceNum = this.item.planPlaceNum + data.length;

							this.dayScrollTop = 0;
							this.hday = 0;
							this.$nextTick(() => {
								this.getDaysTop();
							});
						},
					},
				});
			},
			getDistence(lat, lon, lat2, lon2) {
				var radLat1 = (lat * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lon * Math.PI) / 180.0 - (lon2 * Math.PI) / 180.0;
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2)
						)
					);
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000;
				if (isNaN(s)) {
					return 0 + "m";
				}
				if (s > 1000) {
					//    大于1000米时
					s = Math.floor((s / 1000) * 100) / 100;
					s = s + "km";
				} else {
					//    小于1000米直接返回
					s = s + "m";
				}
				return s;
			},
			delDay(item, index) {
				this.item.planDayNum--;
				this.item.planPlaceNum =
					this.item.planPlaceNum - this.dayList[index].scenicSpotList.length;
				this.dayList.splice(index, 1);
			},
			delJd(index, idx) {
				this.item.planPlaceNum--;
				this.dayList[index].scenicSpotList.splice(idx, 1);
				this.dayList.forEach((d, i) => {
					let names = [];
					d.scenicSpotList.forEach((s) => names.push(s.generalSpot.name));
					d.address = names.join(">");
				});
			},
			xiangiqnga(e, i) {
				this.hday = i;
				this.dayScrollTop = this.dayTops[i];
			},
			handlePopup() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			toSaveXc() {
				if (!this.travelName) return this.$showToast("请填写行程名称");

				this.item.name = this.travelName;
				this.item.scheduleList = this.dayList;
				this.item.coverImage = this.item.coverImageList[0];
				this.$api
					.post("/api/customrec/addRecRouteToUser", this.item)
					.then((res) => {
						if (res.data.code === 0) {
							this.$showToast("保存成功");
							setTimeout(() => {
								uni.redirectTo({
									url: "/pagesTrip/custom-travel/index",
								});
							}, 2000);
						} else this.$showModal(res.data.msg);
					});
			},
			toDelXc() {
				this.$api.del("/api/customrec/deleteRoute/" + this.id).then((res) => {
					if (res.data.code === 0) {
						this.$showToast("删除成功");
						setTimeout(() => {
							uni.redirectTo({
								url: "/pagesTrip/custom-travel/index",
							});
						}, 2000);
					} else this.$showModal(res.data.msg);
				});
			},
			toClearXc() {
				this.dayList.forEach((d, i) => {
					this.$set(this.dayList[i], "scenicSpotList", []);
				});
				uni.pageScrollTo({
					scrollTop: 0,
				});
			},
			toEditXc() {
				this.item.scheduleList = this.dayList;
				this.$api.post("/api/customrec/saveRoute", this.item).then((res) => {
					if (res.data.code === 0) {
						this.$showToast("编辑成功");
						setTimeout(() => {
							uni.redirectTo({
								url: "/pagesTrip/custom-travel/index",
							});
						}, 2000);
					} else this.$showModal(res.data.msg);
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.tuijianliyou {
		box-sizing: border-box;
		width: 710rpx;
		min-height: 60rpx;
		background: #faf6ee;
		border-radius: 16rpx;
		margin: 0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #b77231;
		line-height: 35rpx;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;
		padding: 10rpx;
	}

	.diia_r {
		width: 136rpx;
		height: 48rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
		border: 1rpx solid #ccc;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #808080;
	}

	.travelName {
		::v-deep .u-popup__content {
			background: #fff;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;

			.popup {
				padding: 30rpx;
			}

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				font-size: 30rpx;

				&> :first-child {}
			}
		}
	}

	.page {
		.p_head {
			width: 100%;
			padding: 0 0 38rpx 20rpx;
			box-sizing: border-box;
			// background: url(https://i.ringzle.com/file/20240412/059c753c11ad4a75ace69381d3c69e90.png) no-repeat;
			background-size: cover;

			.ph_title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pht_left {
					width: 174rpx;
					height: 54rpx;
				}

				.pht_right {
					width: 183rpx;
					height: 60rpx;
					background: linear-gradient(90deg,
							#8f9ac0 0%,
							rgba(0, 0, 0, 0.31) 100%);
					border-radius: 30rpx 0rpx 0rpx 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}

					text {
						margin-left: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 33rpx;
					}
				}
			}

			.ph_days {
				width: 100%;
				padding-right: 20rpx;
				box-sizing: border-box;
				margin-top: 15rpx;

				.phd_pre {
					margin-top: 8rpx;
					width: 100%;
					height: 96rpx;
					padding: 18rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 0.1);

					&.active {
						background-color: rgba(255, 255, 255, 0.2);
					}

					.phdp_left {
						width: calc(100% - 90rpx);
						display: flex;
						align-items: center;

						.pl_day {
							width: 50rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #efefef;
								line-height: 20rpx;

								&:last-child {
									margin-top: 6rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: 800;
									font-size: 36rpx;
									color: #efefef;
									line-height: 36rpx;
								}
							}
						}

						.pl_scenes {
							width: calc(100% - 50rpx);
							padding: 0 19rpx 0 13rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							max-height: 68rpx;
							overflow: hidden;

							.yanshabi {
								display: flex;
								align-items: center;

								.cuinima1 {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #efefef;
									text-align: left;
									font-style: normal;
								}

								.cuinima2 {
									image {
										padding: 0 10rpx;
									}
								}
							}
						}
					}

					.phdp_right {
						width: 90rpx;
						height: 44rpx;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 22rpx;
						border: 2rpx solid #aaaaaa;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #fefffe;
						line-height: 33rpx;
					}
				}
			}
		}

		.content {
			width: 100%;
			margin-top: -18rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #f5f8fa;
			position: relative;
			overflow-y: auto;
			padding-bottom: 40rpx;
			box-sizing: border-box;

			&>scroll-view {
				height: 100%;
			}

			&.days {
				padding: 18rpx 20rpx 0;

				.day_item {
					margin-top: 60rpx;

					&:first-child {
						margin-top: 0;
					}

					.di_top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 30rpx;

						.goushi {
							font-size: 32rpx;
							font-family: PingFang SC-Heavy, PingFang SC;
							font-weight: 800;
							color: #111111;
						}

						.dit_del {
							display: flex;
							align-items: center;

							image {
								width: 28.63rpx;
								height: 28rpx;
							}

							text {
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #007a69;
								margin-left: 8rpx;
							}
						}
					}

					.di_info {
						padding: 33rpx 0 30rpx;

						.dii_title {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
						}

						.dii_addr {
							margin-top: 16rpx;
							display: flex;
							justify-content: space-between;

							.diia_l {
								display: flex;
								align-items: center;

								image {
									width: 20rpx;
									height: 26rpx;
								}

								text {
									font-size: 26rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #111111;
									margin-left: 10rpx;
								}
							}
						}
					}

					.di_scenicSpot {
						.ds_top {
							width: calc(100% - 50rpx);
							background: #ffffff;
							box-shadow: 0rpx 4rpx 12rpx 1rpx rgba(13, 191, 253, 0.02);
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							padding: 22rpx 30rpx 22rpx 20rpx;
							display: flex;
							align-items: right;
							justify-content: space-between;

							.right {
								height: 150rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-evenly;
								align-items: flex-end;
								text-align: right;

								.price {
									font-size: 24rpx;
									font-family: PingFang SC-Heavy, PingFang SC;
									font-weight: 400;
									color: #999999;

									span:nth-child(1) {
										color: red;
									}

									span:nth-child(2) {
										color: red;
										font-weight: 800;
										font-size: 30rpx;
									}
								}
							}

							.ds_left {
								display: flex;
								align-items: center;
								position: relative;

								.mingxi {
									position: absolute;
									top: 0;
									left: 0;
									display: flex;

									.mingxi1 {
										width: 35rpx;
										height: 36rpx;
										background: #1f242c;
										font-family: PingFangSC, PingFang SC;
										font-weight: 400;
										font-size: 22rpx;
										color: #ffffff;
										line-height: 36rpx;
										font-style: normal;
										text-align: center;
										border-top-left-radius: 10rpx;
									}

									.mingxi2 {
										width: 95rpx;
										height: 36rpx;
										background: #007a69;
										font-family: PingFangSC, PingFang SC;
										font-weight: 400;
										font-size: 22rpx;
										color: #ffffff;
										line-height: 36rpx;
										text-align: center;
										font-style: normal;
									}
								}

								.dl_img {
									position: relative;

									&>image {
										width: 158rpx;
										height: 148rpx;
										border-radius: 10rpx;
									}
								}

								.dsl_info {
									display: flex;
									flex-direction: column;
									padding-left: 24rpx;
									width: 331rpx;
									justify-content: space-between;
									min-height: 157rpx;

									.price {
										font-size: 24rpx;
										font-family: PingFang SC-Heavy, PingFang SC;
										font-weight: 400;
										color: #999999;

										span:nth-child(1) {
											color: red;
										}

										span:nth-child(2) {
											color: red;
											font-weight: 800;
											font-size: 30rpx;
										}
									}

									&>view {
										font-size: 24rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										margin-top: 16rpx;

										&:first-child {
											font-size: 30rpx;
											font-family: PingFang SC-Heavy, PingFang SC;
											font-weight: 800;
											color: #111111;
										}
									}
								}
							}

							.ds_right {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.ds_bottom {
							width: 710rpx;
							height: 100rpx;
							display: flex;

							.juli2 {
								width: 660px;
								height: 100rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #88919d;
								line-height: 100rpx;
								text-align: left;
								font-style: normal;
							}

							.juli1 {
								width: 50rpx;
								height: 100rpx;
								display: flex;
								flex-direction: column;
								position: relative;

								.shuxian1 {
									padding-left: 5rpx;
									border-right: 1px solid #ccc;
									width: 2rpx;
									height: 40rpx;
								}

								.shuxian2 {
									width: 10rpx;
									height: 10rpx;
									border-radius: 5rpx;
									background-color: #ccc;
									margin: 5rpx 0 5rpx 2rpx;
								}

								.shuxian3 {
									padding-left: 5rpx;
									border-right: 1px solid #ccc;
									width: 2rpx;
									height: 40rpx;
								}
							}
						}
					}
				}

				.d_btns {
					margin-top: 40rpx;

					&>view {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #01b8f8;
					}

					.db_edit {
						margin-top: 20rpx;
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 174rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			padding-right: 30rpx;
			box-sizing: border-box;

			.b_btn {
				width: 100%;
				height: 88rpx;
				background: #007a69;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				letter-spacing: 2rpx;
				margin-top: 39rpx;
			}

			.bottom_left {
				display: flex;

				.delete,
				.shareSquare {
					width: 100rpx;
					margin: 0 15rpx;

					.image {
						width: 42rpx;
						height: 42rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: 24rpx;
						color: #666;
						font-weight: Regular;

						button {
							font-size: 24rpx;
							color: #666;
							font-weight: Regular;
							background: transparent !important;
							border: none !important;
							padding: 0 !important;
							display: flex;
							flex-direction: column;
							align-items: center;

							image {
								width: 42rpx;
								height: 42rpx;
							}

							&::after {
								clear: both;
								background: transparent !important;
								border: none !important;
								height: auto !important;
							}
						}
					}
				}
			}

			&.bottom_del {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>view {
					width: calc(50% - 15rpx);
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;

					&.b_btn_del {
						border: 1rpx solid #cccccc;
						color: #333333;
					}

					&.b_btn_edit {
						background: #007a69;
						color: #ffffff;
						line-height: 88rpx;
					}
				}
			}
		}
	}
</style>